@{
    ViewData["Title"] = "编辑生产工单";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑生产工单</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .modern-form {
            padding: 20px;
        }

        .modern-form .form-row {
            display: flex;
            margin: 0 -12px;
            flex-wrap: wrap;
        }

        .modern-form .form-item {
            flex: 0 0 calc(33.333% - 24px);
            margin: 0 12px 20px;
        }

        .modern-form .form-item.full-width {
            flex: 0 0 calc(100% - 24px);
        }

        .modern-form .form-label {
            display: block;
            margin-bottom: 8px;
            color: #606266;
            font-size: 14px;
        }

        .modern-form .form-label.required::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }

        .modern-form .form-control {
            width: 100%;
            position: relative;
        }

        .modern-form .layui-input,
        .modern-form .layui-select,
        .modern-form .layui-textarea {
            width: 100%;
            height: 32px;
            line-height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0 12px;
        }

        .modern-form .layui-textarea {
            height: 80px;
            line-height: 1.5;
            padding: 8px 12px;
        }

        .modern-form .search-icon {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: #c0c4cc;
            cursor: pointer;
        }

        .modern-form .form-actions {
            margin-top: 32px;
            text-align: right;
            border-top: 1px solid #ebeef5;
            padding-top: 16px;
        }

        .modern-form .error-message {
            color: #f56c6c;
            font-size: 12px;
            margin-top: 4px;
            min-height: 18px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form modern-form" lay-filter="editForm">
                    <input type="hidden" name="id" />
                    
                    <div class="form-row">
                        <div class="form-item">
                            <label class="form-label required">工单编码</label>
                            <div class="form-control">
                                <input type="text" name="workOrderCode" lay-verify="required" placeholder="请输入工单编码" class="layui-input" />
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="form-label required">工单名称</label>
                            <div class="form-control">
                                <input type="text" name="workOrderName" lay-verify="required" placeholder="请输入工单名称" class="layui-input" />
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="form-label required">来源类型</label>
                            <div class="form-control">
                                <select name="sourceType" lay-verify="required" lay-filter="sourceType">
                                    <option value="客户订单">客户订单</option>
                                    <option value="库存备货">库存备货</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div id="customerOrderFields">
                        <div class="form-row">
                            <div class="form-item">
                                <label class="form-label">订单编号</label>
                                <div class="form-control">
                                    <input type="text" name="orderCode" placeholder="请输入订单编号" class="layui-input" />
                                </div>
                            </div>
                            <div class="form-item">
                                <label class="form-label">客户编码</label>
                                <div class="form-control">
                                    <input type="text" name="customerCode" placeholder="请选择客户" class="layui-input" />
                                    <i class="layui-icon layui-icon-search search-icon" onclick="selectCustomer()"></i>
                                </div>
                            </div>
                            <div class="form-item">
                                <label class="form-label">客户名称</label>
                                <div class="form-control">
                                    <input type="text" name="customerName" placeholder="客户名称" class="layui-input" readonly />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-item">
                            <label class="form-label required">工单类型</label>
                            <div class="form-control">
                                <select name="workOrderType" lay-verify="required">
                                    <option value="自产">自产</option>
                                    <option value="外协">外协</option>
                                    <option value="外购">外购</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="form-label required">产品编号</label>
                            <div class="form-control">
                                <input type="text" name="productCode" lay-verify="required" placeholder="请选择产品" class="layui-input" />
                                <i class="layui-icon layui-icon-search search-icon" onclick="selectProduct()"></i>
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="form-label required">产品名称</label>
                            <div class="form-control">
                                <input type="text" name="productName" lay-verify="required" placeholder="产品名称" class="layui-input" readonly />
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-item">
                            <label class="form-label">规格型号</label>
                            <div class="form-control">
                                <input type="text" name="specification" placeholder="规格型号" class="layui-input" readonly />
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="form-label">单位</label>
                            <div class="form-control">
                                <input type="text" name="unit" placeholder="单位" class="layui-input" readonly />
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="form-label required">工单数量</label>
                            <div class="form-control">
                                <input type="number" name="quantity" lay-verify="required|number" value="1" min="1" class="layui-input" />
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-item">
                            <label class="form-label required">需求日期</label>
                            <div class="form-control">
                                <input type="text" name="requiredDate" id="requiredDate" lay-verify="required" placeholder="请选择需求日期" class="layui-input" />
                                <i class="layui-icon layui-icon-date search-icon"></i>
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="form-label">批次号</label>
                            <div class="form-control">
                                <input type="text" name="batchNumber" placeholder="请输入批次号" class="layui-input" />
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="form-label">单据状态</label>
                            <div class="form-control">
                                <select name="status">
                                    <option value="0">草稿</option>
                                    <option value="1">已确认</option>
                                    <option value="2">已完成</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-item full-width">
                            <label class="form-label">备注</label>
                            <div class="form-control">
                                <textarea name="remarks" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="saveForm">保存</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer', 'laydate'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var $ = layui.$;

            // 初始化日期选择器
            laydate.render({
                elem: '#requiredDate',
                trigger: 'click'
            });

            // 监听来源类型切换
            form.on('select(sourceType)', function(data){
                if(data.value === '客户订单') {
                    $('#customerOrderFields').show();
                } else {
                    $('#customerOrderFields').hide();
                }
            });

            // 监听表单提交
            form.on('submit(saveForm)', function(data){
                var postData = {
                    id: parseInt(data.field.id),
                    workOrderCode: data.field.workOrderCode,
                    workOrderName: data.field.workOrderName,
                    sourceType: data.field.sourceType,
                    documentStatus: parseInt(data.field.status),
                    workOrderType: data.field.workOrderType,
                    productCode: data.field.productCode,
                    productName: data.field.productName,
                    productModel: data.field.specification,
                    unit: data.field.unit,
                    workOrderQuantity: parseInt(data.field.quantity),
                    demandDate: data.field.requiredDate,
                    batchNo: data.field.batchNumber,
                    remark: data.field.remarks,
                    orderCode: data.field.orderCode,
                    customerCode: data.field.customerCode,
                    customerName: data.field.customerName
                };

                var loadIndex = layer.load(2);
                $.ajax({
                    url: '/ProductionWorkOrderMain/UpdateWorkOrder',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(postData),
                    success: function(res) {
                        layer.close(loadIndex);
                        if(res.success) {
                            layer.msg('保存成功', {
                                icon: 1,
                                time: 1000
                            }, function(){
                                // 刷新父页面的表格
                                parent.location.reload();
                                // 关闭当前弹窗
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.message || '保存失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.close(loadIndex);
                        layer.msg('保存失败，请稍后重试', {icon: 2});
                    }
                });
                return false;
            });

            // 加载工单数据
            var id = getUrlParam('id');
            if(id) {
                $.ajax({
                    url: '/ProductionWorkOrderMain/GetWorkOrderById',
                    type: 'GET',
                    data: { id: id },
                    success: function(res) {
                        if(res.success && res.data) {
                            var data = res.data;
                            form.val('editForm', {
                                'id': data.id,
                                'workOrderCode': data.workOrderCode,
                                'workOrderName': data.workOrderName,
                                'sourceType': data.sourceType,
                                'status': data.documentStatus.toString(),
                                'workOrderType': data.workOrderType,
                                'productCode': data.productCode,
                                'productName': data.productName,
                                'specification': data.productModel,
                                'unit': data.unit,
                                'quantity': data.workOrderQuantity,
                                'requiredDate': formatDate(data.demandDate),
                                'batchNumber': data.batchNo,
                                'remarks': data.remark,
                                'orderCode': data.orderCode,
                                'customerCode': data.customerCode,
                                'customerName': data.customerName
                            });

                            // 根据来源类型显示/隐藏客户订单字段
                            if(data.sourceType === '客户订单') {
                                $('#customerOrderFields').show();
                            } else {
                                $('#customerOrderFields').hide();
                            }

                            form.render();
                        } else {
                            layer.msg('获取工单数据失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('获取工单数据失败，请稍后重试', {icon: 2});
                    }
                });
            }
        });

        // 获取URL参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]); return null;
        }

        // 格式化日期
        function formatDate(date) {
            if(!date) return '';
            var d = new Date(date);
            var year = d.getFullYear();
            var month = (d.getMonth() + 1).toString().padStart(2, '0');
            var day = d.getDate().toString().padStart(2, '0');
            return year + '-' + month + '-' + day;
        }

        // 选择产品
        function selectProduct() {
            // TODO: 实现产品选择功能
            layer.msg('请实现产品选择功能');
        }

        // 选择客户
        function selectCustomer() {
            // TODO: 实现客户选择功能
            layer.msg('请实现客户选择功能');
        }
    </script>
</body>
</html> 